<template>
	<view >
		<!-- 标签 -->
		<u-sticky bgColor="#fff">
			<u-tabs :list="tags" @click="gridClick()"></u-tabs>
		</u-sticky>

		<!-- 列表 -->
		<view>
			
			<view v-for="(item,index) in storeList" :key="index" @click="cardClick(item.id)"
				style="border-radius: 20rpx;display: flex;justify-content: center;margin: 20rpx;padding: 14rpx;background-color: #fff;">
				<view style="width: 260rpx;height: 190rpx;border-radius: 20rpx;overflow: hidden;">
					<image style="width: 100%;height: 100%;" :src="imgOne(item.pic)" mode="aspectFill">
					</image>
				</view>
				<view style="width: 100%;margin-left: 20rpx;display: flex;flex-direction: column;">
					<view style="font-size: 28rpx;margin-bottom: 12rpx;">
						{{item.storeName}}
					</view>
					<view
						style="margin-bottom: 12rpx;font-size: 26rpx;color: #909399;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">
						{{item.storeAddress}}
					</view>
					<view style="align-self: flex-start;margin-bottom: 12rpx;">
						<text v-if="queryTags == '餐饮美食'" class="etcString"
							style="background-color: #20C3FE;">{{item.businessHours}}</text>
						<text v-if="queryTags == '休闲娱乐'" class="etcString"
							style="background-color: #F9AE3D;">{{item.businessHours}}</text>
						<text v-if="queryTags == '家居建材'" class="etcString"
							style="background-color: #5AC725;">{{item.businessHours}}</text>
						<text v-if="queryTags == '婚摄影楼'" class="etcString"
							style="background-color: #FF226B;">{{item.businessHours}}</text>
						<text v-if="queryTags == '汽车行业'" class="etcString"
							style="background-color: #DD27DE;">{{item.businessHours}}</text>
						<text v-if="queryTags == '快递物流'" class="etcString"
							style="background-color: #B1CA79;">{{item.businessHours}}</text>
					</view>
					<view style="display: flex;justify-content: flex-end;">
						<view style="margin-left: 10rpx;font-size: 22rpx;color: #909399;">{{item.createTime}}</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#20C3FE" name="eye"></u-icon>
							<text>{{item.lookNum}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#ff5500" name="thumb-up"></u-icon>
							<text>{{item.up==null||item.up == ''?'0':item.up}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon name="star" color="#ffaa00"></u-icon>
							<text>{{item.collect}}</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		getStoreList,
		selectByTags
	} from '../../config/api.js'
	// const baseUrl = 'http://localhost:8080'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				tags: [{
						name: '餐饮美食',
					},
					{
						name: '休闲娱乐',
					},
					{
						name: '家居建材'
					},
					{
						name: '婚摄影楼'
					},
					{
						name: '汽车行业'
					},
					{
						name: '快递物流'
					},
				],
				keyword: '',
				storeList: [],
				queryTags: '餐饮美食'
			}
		},
		onLoad() {
			if (!this.getIsLogin) { //
				this.init() //*
			}
		},
		computed: {
			...mapGetters(['getBaseUrl']),
		},
		methods: {
			init() {
				// 获取店铺列表
				getStoreList().then(res => {
					this.storeList = res.data.data.map(item => {
						return {
							id: item.id,
							storeName: item.storeName,
							storeIntroduction: item.storeIntroduction,
							storeAddress: item.storeAddress,
							pic: this.getBaseUrl + item.pic,
							storeManeger: item.storeManeger,
							telephone: item.telephone,
							businessHours: item.businessHours,
							lookNum: item.lookNum,
							telephone: item.telephone,
							tags: item.tags,
							createTime: item.createTime,
							up: item.up,
							collect:item.collect
						}
					})
				})
			},
			// 取卡片对象的第一张图片
			imgOne(pic) {
				let src = pic.split(",")[0];
				return src
			},
			// 进入详情界面
			cardClick(id) {
				uni.navigateTo({
					url: `/pages/shop/shopDetail?id=${id}`
				})
			},
			// 根据tags请求
			selectByTags() {
				selectByTags({
					tags: this.queryTags
				}).then(res => {
					this.storeList = res.data.data.map(item => {
						return {
							id: item.id,
							storeName: item.storeName,
							storeIntroduction: item.storeIntroduction,
							storeAddress: item.storeAddress,
							pic: this.getBaseUrl + item.pic,
							storeManeger: item.storeManeger,
							telephone: item.telephone,
							businessHours: item.businessHours,
							lookNum: item.lookNum,
							telephone: item.telephone,
							tags: item.tags,
							createTime: item.createTime,
							up: item.up,
							collect:item.collect
						}
					})
				})
			},
			// 点击标签  分类搜索
			gridClick(item) {
				if (item.index == 0) {
					this.queryTags = '餐饮美食'
				} else if (item.index == 1) {
					this.queryTags = '休闲娱乐'
				} else if (item.index == 2) {
					this.queryTags = '家居建材'
					this.selectByTags();
				} else if (item.index == 3) {
					this.queryTags = '婚摄影楼'
				} else if (item.index == 4) {
					this.queryTags = '汽车行业'
				} else if (item.index == 5) {
					this.queryTags = '快递物流'
				}
				this.selectByTags();
			}

		}
	}
</script>

<style scoped lang="scss">

	.etcString {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 22rpx;
		border-radius: 10rpx;
		line-height: 40rpx;
		padding: 8rpx;
		color: #fff;
	}
</style>